<template>
  <view class="original-text">
    <view class="original-text-head">
      <image height="15rem" fit="cover" style="width: 100%;" src="https://img.yzcdn.cn/vant/cat.jpeg"/>
      <view class="original-text-left">

        <image round fit="cover" style="width: 20px; height: 20px; border-radius: 50%;" src="https://img.yzcdn.cn/vant/cat.jpeg"/>
        <text>家居设计</text>
      </view>
      <view class="original-text-right">
        <van-icon name="share-o" size="20"/>
      </view>
    </view>
    <view class="original-text-content" align="left">
      <h1 style="font-size: 1.1rem">{{galleryOriginal.galleryOriginalTitle}}</h1>
      <h2 style="font-size: 0.8rem">方案说明</h2>
      <view>项目名称：{{galleryOriginal.galleryOriginalName}}</view>
      <view>项目地点：{{galleryOriginal.galleryOriginalPlace}}</view>
      <view>项目楼盘：{{galleryOriginal.galleryOriginalFloor}}</view>
      <view>项目面积：{{galleryOriginal.galleryOriginalArea}} ㎡</view>
      <view>设计师：{{galleryOriginal.galleryOriginalDesigner}}</view>
      <view>案例说明：</view>
      <view class="p-text-indent" v-for="cases in GalleryCase" :key="cases.index">
        <view>{{cases.galleryCaseText}}</view>
      </view>
    </view>
  </view>
</template>

<script>

  import { selectGalleryById , selectGalleryCaseList } from "@/api/gallery/gallery.js";

  export default {
    name: "original_text",
    data(){
      return{
        galleryInfoId:Number,
        galleryOriginal: Object,
        galleryOriginalId:Number,
        GalleryCase: [],
      }
    },
	onLoad(openid) {
		var galleryInfoId = parseInt(openid.galleryInfoId);
		this.galleryInfoId = galleryInfoId;
		this.getGalleryById();
	},
    created() {
      // var galleryInfoId = parseInt(this.$route.query.galleryInfoId);
      // this.galleryInfoId = galleryInfoId;
      // this.getGalleryById();
    },
    methods: {
      toBack(){
        this.$router.go(-1);//返回上一层
      },
      getGalleryById(){
        selectGalleryById(this.galleryInfoId).then((res) =>{
          this.galleryOriginal = res.data.data;
          this.galleryOriginalId = res.data.data.galleryOriginalId;
          this.getGalleryCaseList();
        })
      },
      getGalleryCaseList(){
        selectGalleryCaseList(this.galleryOriginalId).then((res) =>{
          this.GalleryCase = res.data.data;
        })
      }
    }
  }
</script>

<style scoped>
  .original-text-head{
    position: relative;
  }
  .demo-nav__back{
    width: 24px;
    height: 24px;
  }
  .original-text-left{
    position: absolute;
    top: 0.6rem;
    left: 0.5rem;
    color: white;
    font-size: 0.8rem;
  }
  .original-text-left text{
    float: right;
    margin-top: 0.2rem;
    margin-left: 0.2rem;
  }
  .original-text-right{
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
  }
  .original-text-content{
    padding:0 2rem;
  }
  .original-text-content h1,h2{
    padding: 0.3rem 0;
  }
  .original-text-content p{
    padding: 0.3rem 0;
    font-size: 0.7rem;
    color: black;
  }
  .original-text-bottom{
    padding: 1rem 0 1rem 2rem;
  }
  .original-text-bottom-input{
    width: 80%;
    border-radius: 2rem;
    padding: 5px 16px;
    -moz-box-shadow:2px 2px 5px #333333;
    -webkit-box-shadow:2px 2px 5px #333333;
    box-shadow:2px 2px 5px #333333;
  }

</style>
